<template>
  <section>
    <t-tabs
      v-model="activePage"
      @change="handlerTab"
      @remove="colseTab"
      style="overflow: unset"
    >
      <t-tab-panel
        v-for="page in tagsPage"
        :key="page.path"
        :value="page.path"
        :label="page.title"
        :removable="page.path === '/index' ? false : true"
      />
    </t-tabs>
  </section>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/modules/system';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const store = useSystemStore();
const { tagsPage } = storeToRefs(store);
const activePage = ref(route.path);
watch(
  () => route.path,
  val => {
    activePage.value = route.path;
  },
);
const handlerTab = (path: string) => {
  router.push(path);
};
const colseTab = ({ value }: any) => {
  store.REMOVE_TAGSPAGE(value);
};
</script>
